﻿@{
    ViewBag.Title = "Grid : Client Side Sorting";
}

<h2>Grid : Client Side Sorting</h2>

<h3>Sample</h3>

@{
    Html.Telerik().Grid<TelerikMvcClientApi.Models.Product>()
        .Name("MyGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name);
            columns.Bound(c => c.Category);
            columns.Bound(c => c.SubCategory).Width(400);
            columns.Bound(c => c.Controls).Title("Controls/Features").ClientTemplate("<#= Controls==0?'':Controls #>");
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("SelectProducts", "Grid"))
        .Scrollable(s => s.Height("auto"))
        .Sortable(s => s.Enabled(true))
        .ClientEvents(events => events.OnLoad("MyGrid_onLoad"))
        .Render();
}

<script type="text/javascript">
    MyGrid_onLoad = function (e) {
        $(e.target).data('tGrid').enableClientSort();
    }
</script>

<h3>Documentation</h3>
<p>
The Grid loads the data using AJAX, but the sorting is client side.  The sorting is enabled in the onLoad 
client event function handler by calling the grid.data('tGrid').enableClientSort() extension method.<br />
<br />
Here is the code for the onLoad client event function handler:

<pre class="code">
MyGrid_onLoad = function(e) {
    $(e.target).data('tGrid').enableClientSort();
}
</pre>
</p>
